﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="GUI_Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta  http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<meta name="author" content="Parallelus" />
	<meta name="description" content="A brief description of this website or your business." />
	<meta name="keywords" content="keywords, or phrases, associated, with each page, are best" />
	
	<!-- Favorites icon -->
	<link rel="shortcut icon" href="http://para.llel.us/favicon.ico" />
	
	<!-- Style sheets -->
	<link rel="stylesheet" type="text/css" href="css/reset.min.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<link rel="stylesheet" type="text/css" href="css/menu.css" />
	<link rel="stylesheet" type="text/css" href="css/fancybox.css" />

	<!-- Skin Style Sheet 
    
    -->
	<link rel="stylesheet" href="css/skins/skin-6.css" type="text/css" id="SkinCSS" />

	<!-- jQuery framework and utilities -->
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">	    $j = jQuery.noConflict(); </script>
	<script type="text/javascript" src="js/jquery-ui-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
	<script type="text/javascript" src="js/hoverIntent.min.js"></script>
	<!-- Drop down menus -->
	<script type="text/javascript" src="js/menu.js"></script>
	<!-- Font replacement (cufon) -->
	<script type="text/javascript" src="js/cufon-yui.js"></script>
	<script type="text/javascript" src="js/Vegur.font.js"></script>
	<script type="text/javascript" src="js/Vegur.Light.font.js"></script>
	<!-- Input labels -->
	<script type="text/javascript" src="js/jquery.overlabel.min.js"></script>
	<!-- Inline popups/modal windows -->
	<script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>

	<!-- Carousel (for featured content) -->
		<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
		<script type="text/javascript">
		    function mycarousel_initCallback(carousel) {
		        jQuery('#FeaturedNext').bind('click', function () { carousel.next(); return false; });
		        jQuery('#FeaturedPrev').bind('click', function () { carousel.prev(); return false; });
		    };
		    // Load product carousel...
		    jQuery(document).ready(function () {
		        jQuery("#FeaturedContent").jcarousel({
		            scroll: 3,
		            visible: 5,
		            initCallback: mycarousel_initCallback,
		            buttonNextHTML: null,
		            buttonPrevHTML: null
		        });
		    });
		</script>

	<!-- Slide shows -->
		<!-- Cycle 	(default) -->
		<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
		<script type="text/javascript">
		    // initialize slideshow (Cycle)
		    jQuery(document).ready(function ($) {
		        if ($('#Slides').length > 0) {
		            $('#Slides').cycle({
		                fx: 'fade',
		                speed: 750,
		                timeout: 4000,
		                randomizeEffects: false,
		                easing: 'easeOutCubic',
		                next: '.slideNext',
		                prev: '.slidePrev',
		                pager: '#SlidePager',
		                before: function () {
		                    // reset the overlay for the next slide
		                    jQuery('#SlideShow').css('cursor', 'default').unbind('click');
		                },
		                after: function () {
		                    // get the link and apply it to the overlay
		                    var theLink = jQuery(this);
		                    var linkURL = (theLink) ? theLink.attr('href') : false;
		                    if (linkURL) {
		                        jQuery('#SlideShow').css('cursor', 'pointer').click(function () {
		                            document.location.href = linkURL;
		                        });
		                    }
		                }
		            });
		        }
		    });
		</script>


	<!-- IE only includes (PNG Fix and other things for sucky browsers -->
	
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="css/ie-6.css">
		<script type="text/javascript" src="js/pngFix.min.js"></script>
		<script type="text/javascript"> 
			$j(document).ready(function(){ 
				$j(document.body).supersleight();
			}); 
		</script> 
	<![endif]-->
	<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie-all-versions.css"><![endif]-->


	<!-- BEGIN: For Demo Only -->
		<!--			
		These entries are only needed for demo features, such as the real-time skin changer.
		They can be deleted for production installs without effecting the theme's design or 
		any of the funcionality.
		-->
		<script type="text/javascript" src="js/demo.js"></script>	
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<!-- END: For Demo Only -->


	<!-- Functions to initialize after page load -->
	<script type="text/javascript" src="js/onLoad.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="Wrapper">

	<div id="Top">
		<div id="TopContainer">
			
			<!-- Search -->
			<div id="SearchWrapper">
				<div id="Search">
					<form action="#" id="SearchForm" method="post">
						<p style="margin:0;"><input type="text" name="SearchInput" id="SearchInput" value="" /></p>
						<p style="margin:0;"><input type="submit" name="SearchSubmit" id="SearchSubmit" class="noStyle" value="" /></p>
					</form>
				</div>
			</div>
			
			<!-- Main Menu: MegaMenu -->
			<div id="MainMenu">
				<ul id="MegaMenu">
				
					<li class="current"><a href="index.html">Home</a></li>
					<li>
						<a href="#">Features</a>
						<div class="sub">
							<div class="row">
								<ul style="width: 200px;">
									<li><h2><a href="#">Home page</a></h2></li>
									<li><a href="index.html">Home 1 (default)</a></li>
									<li><a href="index-2.html">Home 2 (Products)</a></li>
									<li><a href="index-3.html">Home 3 (Nivo)</a></li>
									<li><br /><h2><a href="sample-layout.html">Theme Resources</a></h2></li>
									<li><a href="sample-text.html">Text Styles</a></li>
									<li><a href="sample-layout.html">Layout Overview</a></li>
								</ul>
								<ul style="width: 200px;">
									<li><h2><a href="#">Sample Pages</a></h2></li>
									<li><a href="sample-portfolio.html">Portfolio</a></li>
									<li><a href="sample-portfolio-2.html">Portfolio 2</a></li>
									<li><a href="sample-blog.html">Blog</a></li>
									<li><a href="sample-blog-page.html">Blog (single post)</a></li>
									<li><a href="sample-contact.html">Contact Form</a></li>
									<li><a href="sample-faq.html">FAQ's</a></li>
								</ul>
								<ul style="width: 200px;">
									<li><h2><a href="#">Mega Menus</a></h2></li>
									<li>
										<p>Add unlimited content, links, images and detailed information in your drop-down menus with Mega Menus.</p>
										<p>Usability testing shows mega drop-downs are more efficient and overcome the downsides of traditional menus.</p>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">Skins</a>
						<div style="" class="sub">
							<div class="row">
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('1');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-1.jpg" width="130" alt="Skin 1" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('1');">Skin 1</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('2');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-2.jpg" width="135" alt="Skin 2" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('2');">Skin 2</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('3');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-3.jpg" width="135" alt="Skin 3" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('3');">Skin 3</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('4');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-4.jpg" width="135" alt="Skin 4" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('4');">Skin 4</a></h2></li>
								</ul>
							</div>
							<div class="row">
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('5');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-5.jpg" width="135" alt="Skin 5" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('5');">Skin 5</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('6');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-6.jpg" width="135" alt="Skin 6" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('6');">Skin 6</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('7');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-7.jpg" width="135" alt="Skin 7" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('7');">Skin 7</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('8');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-8.jpg" width="135" alt="Skin 8" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('8');">Skin 8</a></h2></li>
								</ul>
							</div>
							<div class="row" style="text-align: center;">
								<ul style="width: auto; float:none; ">
									<li>
										<label for="WideFormatDesign">
											<input type="checkbox" id="WideFormatDesign" name="WideFormatDesign" /> Enable alternate wide format design? This will toggle the "page" style design on and off.
										</label>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li><a href="sample-faq.html">FAQ's</a></li>	
					<li><a href="sample-contact.html">Contact</a></li>	

				</ul>
			</div> <!-- END id="MainMenu" -->
			
		</div>
	</div> <!-- END id="Top" -->
	
	<a href="index.html" id="LogoHeader"></a>
	
	<div id="SlideShow">
		<div id="SlideShow-Images">
			<div id="CyclePlugin">
				<div id="Slides">
					<img src="images/content/demo-only/placeholder.jpg" width="974" height="385" alt="slide 1" />
					<img src="images/content/demo-only/placeholder.jpg" width="974" height="385" alt="slide 2" />
					<div style="display:none;">
						<img src="images/content/demo-only/placeholder.jpg" width="974" height="385" alt="slide 3" />
						<div class="ssOverlay-1">
							<div class="ssOverlayText">
								<h3>Lorem ipsum dolor sit amet, consectetur adipiscing.</h3>
								<p>Suspendisse in condimentum erat. Etiam lacinia eleifend sollicitudin. Sed ac suscipit sem. Aenean mollis augue pretium elit luctus dignissim. Donec consequat libero quis nunc suscipit vehicula. Pellentesque tincidunt dui orci, in vehicula mauris.</p>
							</div>
						</div>
					</div>
					<div style="display:none;">
						<img src="images/content/demo-only/placeholder.jpg" width="974" height="385" alt="slide 4" />
						<div class="ssOverlay-2">
							<div class="ssOverlayText">
								<h3>Lorem ipsum dolor sit amet, consectetur adipiscing</h3>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="SlideShow-Controls">
			<div id="SlideNextPrev">
				<a href="#" class="slideNext"></a>
				<a href="#" class="slidePrev"></a>
			</div>
			<div id="SlidePager"></div>
		</div>
		<div id="SlideShow-Top"></div>
		<div id="SlideShow-Middle"></div>
		<div id="SlideShow-Bottom"></div>
	</div> <!-- END id="SlideShow" -->
	
	<div id="SlideShow-Shadow"></div>
	
	<div id="PageTop"></div>
	<div id="PageWrapper">
		
		<div id="PageOverlay">
			<div id="PageOverlayContent">
					
					<div class="contentArea" style="position:relative; width:974px;">
					
						<div id="FeaturedContent">
							<div class="featuredItems">
								<ul>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
									<li>
										<a href="images/content/demo-only/placeholder.jpg" class="imgSmall noIcon zoom" rel="featured">
											<img src="images/content/demo-only/placeholder.jpg" width="160" height="108" alt="Featured Image" />
											<span class="imgFrame"></span>
										</a>
										<h3 class="featuredTitle">Curabitur Dolor</h3>
									</li>
								</ul>
							</div>
							<div class="featuredScroll">
								<a href="#" id="FeaturedNext">Next</a>
								<a href="#" id="FeaturedPrev">Previous</a>
							</div>
							
						</div> <!-- END id="FeaturedContent" -->
						<div class="clear"></div>					
					
					</div>

			</div> <!-- END id="PageOverlayContent" -->
		</div> <!-- END id="PageOveraly" -->


		<div id="Showcase">
			<div id="ShowcaseContent">
				<div class="contentArea">
					<div class="two_third">
						<h1 class="noMargin">You can't just aim at the target, to succeed you have to shoot for what's on the other side.</h1>
					</div>
					<div class="one_third last">
						<h2 style="margin-bottom: 1px;">Socialize much?</h2>
						<ul class="horizList socialLinks" style="margin: 0 0 -5px;">
							<li><a href="#"><img src="images/icons/social/social_balloon-15.png" width="32" height="32" alt="RSS" /></a></li>
							<li><a href="#"><img src="images/icons/social/social_balloon-05.png" width="32" height="32" alt="Twitter" /></a></li>
							<li><a href="#"><img src="images/icons/social/social_balloon-03.png" width="32" height="32" alt="Flickr" /></a></li>
							<li><a href="#"><img src="images/icons/social/social_balloon-14.png" width="32" height="32" alt="Facebook" /></a></li>
							<li><a href="#"><img src="images/icons/social/social_balloon-16.png" width="32" height="32" alt="Technorati" /></a></li>
							<li><a href="#"><img src="images/icons/social/social_balloon-18.png" width="32" height="32" alt="YouTube" /></a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div> <!-- END class="contentArea" -->
			</div> <!-- END id="ShowcaseContent" -->
		</div> <!-- END id="Showcase" -->


		<div id="MainPage">
			<div id="MainPageContent">
				<div class="contentArea">
					<div class="one_third">
					
						<div class="sidebar">
							<div class="sidebarBox-1">
								<div class="sidebarBox-2">
								
									<h3>Categories</h3>
									<ul class="sideNav">
										<li><a href="#">Design</a></li>
										<li class="currentPage"><a href="#">Tutorials</a></li>
										<li><a href="#">Product Reviews</a></li>
										<li><a href="#">Technology</a></li>
										<li><a href="#">Advertising</a></li>
									</ul>

									<h3>Archives</h3>
									<ul class="sideNav">
										<li><a href="#">April 2010</a></li>
										<li><a href="#">March 2010</a></li>
										<li><a href="#">February 2010</a></li>
										<li><a href="#">January 2010</a></li>
										<li><a href="#">December 2009</a></li>
										<li><a href="#">November 2009</a></li>
										<li><a href="#">October 2009</a></li>
										<li><a href="#">September 2009</a></li>
										<li><a href="#">August 2009</a></li>
									</ul>

								</div>
							</div>
						</div>
						
					</div>

                  <div class="portfolioArea portfolioStyle-2">
    <div class="portfolioItem">
							<a href="images/content/demo-only/placeholder.jpg" class="zoom imgVerySmall item-preview iconZoom" title="This is the image description" rel="portfolio">
								<img src="images/content/demo-only/placeholder.jpg" width="160" 
                                height="235" alt="Portfolio Image" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Mollis Metus Vel</h4>
								<p>Aliquam mollis metus vel dolor amet nisi vehicula accumsan luctus.</p>
								<p>Cras tempus purus a felis placerat mattis. Sed luctus hendrerit sem, vel mattis nunc pharetra convallis. Pellentesque pharetra tempus nisi a feugiat. Sed luctus hendrerit pharetra luctus hendrerit sem.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
    <div class="portfolioItem">
							<a href="images/content/demo-only/placeholder.jpg" class="zoom imgVerySmall item-preview iconZoom" title="This is the image description" rel="portfolio">
								<img src="images/content/demo-only/placeholder.jpg" width="160" 
                                height="235" alt="Portfolio Image" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Mollis Metus Vel</h4>
								<p>Aliquam mollis metus vel dolor amet nisi vehicula accumsan luctus.</p>
								<p>Cras tempus purus a felis placerat mattis. Sed luctus hendrerit sem, vel mattis nunc pharetra convallis. Pellentesque pharetra tempus nisi a feugiat. Sed luctus hendrerit pharetra luctus hendrerit sem.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
</div>

				</div> <!-- END class="contentArea" -->
			</div> <!-- END id="MainPageContent" -->
		</div> <!-- END id="MainPage" -->
		
		
	</div> <!-- END id="PageWrapper" -->

	<div id="FooterWrapper">
		<div id="Footer">
			<div id="FooterContent">
				
				<div class="contentArea">
					
					<div class="copyright right">
						Copyright &copy; 2010 - <a href="http://para.llel.us">Parallelus</a> - All rights reserved. |  
						Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> &amp; 
						<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS</a>.
					</div>
					
					<ul id="FooterMenu" class="horizList left">
						<li><a href="index.html">Home</a></li>
						<li><a href="#">Features</a></li>
						<li><a href="sample-faq.html">FAQ's</a></li>
						<li><a href="sample-contact.html">Contact</a></li>
					</ul>
					
					<div class="clear"></div>
					
				</div> <!-- END class="contentArea" -->
				
			</div> <!-- END id="FooterContent" -->
		</div> <!-- END id="Footer" -->
	</div> <!-- END id="FooterWrapper" -->
	
</div> <!-- END id="Wrapper" -->

<!-- Activate Font Replacement (cufon) -->
<script type="text/javascript">    Cufon.now(); </script>
    </form>
</body>
</html>
